Maximizing the Display Area: Vue js Window Fullscreen Feature: The toggle fullscreen code in Vue.js is a JavaScript code snippet that enables an element (e.g. a component or an HTML element) to switch between fullscreen mode and normal mode. The code works by making use of the Fullscreen API, which allows you to enter and exit fullscreen mode in a web browser. The code listens to a button click event, and when triggered, it will either request fullscreen mode for the specified element or exit fullscreen mode, depending on the current state.
How to Implement Window Fullscreen Mode in Vue Js?
- The code creates a Vue app, which is attached to an element with the ID of “app”.
- The app has a single button, with the text “Toggle Fullscreen”.
- The button is given a click event listener, using the
@clickdirective in Vue. - When the button is clicked, the
toggleFullScreenmethod is called. - The
toggleFullScreenmethod checks if the current document is in fullscreen mode. - If the document is not in fullscreen mode, the method calls
document.documentElement.requestFullscreen()to enter fullscreen mode. - If the document is already in fullscreen mode, the method calls
document.exitFullscreen()to exit fullscreen mode.
Vue Window Fullscreen Example
<div id="app">
<button @click="toggleFullScreen">Toggle Fullscreen</button>
</div>
<script type="module">
const app = new Vue({
el: "#app",
methods: {
toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}
}
});
</script>
Output of above example
